<script setup>
import homeSwiper from './child/homeSwiper.vue'
import { getCategoryListByTypeGroup } from '@/api/home'


import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

const tabsList = ref({})

const current = ref(0)
const currentName = ref('')



// 定义触摸起始点的坐标
let startX, startY = 0;
let endX, endY = 0;




function clickItemFn(e) {
  uni.navigateTo({
    url: `/pages/homeDetailsInput/index?item=${JSON.stringify(e)}`,
  })
}


/**
 * 触摸滑动切换tab优化版
 */
function onTouchStart(event) {
  const touch = event.touches[0];
  startX = touch.clientX;
  startY = touch.clientY;
  endX = startX;
  endY = startY;
}

function onTouchMove(event) {
  const touch = event.touches[0];
  endX = touch.clientX;
  endY = touch.clientY;
}

function onTouchEnd() {
  const deltaX = endX - startX;
  const deltaY = endY - startY;

  // 只处理水平滑动且滑动距离大于75px
  if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > 75) {
    const tabKeys = Object.keys(tabsList.value);
    let idx = current.value;

    if (deltaX > 0 && idx > 0) {
      idx--;
    } else if (deltaX < 0 && idx < tabKeys.length - 1) {
      idx++;
    }

    if (idx !== current.value) {
      current.value = idx;
      currentName.value = tabKeys[idx];
    }
  }

  startX = startY = endX = endY = 0;
}




// tabs切换
function tabsChange(e) {
  current.value = e.detail.index
  currentName.value = e.detail.title

}

// 根据分类组获取分类列表
async function getCategoryListByTypeGroupFn() {
  const res = await getCategoryListByTypeGroup()
  currentName.value = Object.keys(res.data)[0]
  tabsList.value = res.data
}


onLoad(() => {
  getCategoryListByTypeGroupFn()
})
</script>

<template>
  <div class='home'>
    <NavBar :zIndex="5" :leftArrow="false">创作</NavBar>
    <div class="container">
      <div class="banner">
        <homeSwiper></homeSwiper>
      </div>
      <div class="tabs">
        <van-tabs :active="current" @change="tabsChange">
          <van-tab v-for=" (item, index)  in tabsList" :key="item.id" :title="index">
          </van-tab>
        </van-tabs>
      </div>

      <scroll-view scroll-y class="content_box" @touchstart="onTouchStart" @touchmove.stop="onTouchMove"
        @touchend="onTouchEnd">
        <div class="content_list">
          <div class="content_item" v-for="item of tabsList[currentName]" @click="clickItemFn(item)">
            <div class="top">
              <div class="icon_box" :style="{ background: item.backColor }">
                <i :class="`iconfont ${item?.imageUrl}`"></i>
              </div>
              <div class="top_title">{{ item?.title }}</div>
            </div>
            <div class="content_text">{{ item?.description }}</div>
          </div>
        </div>
      </scroll-view>

    </div>
    <Tabbar :active="3"></Tabbar>
  </div>
  <van-toast id="van-toast"></van-toast>
</template>

<style lang='scss' scoped>
::v-deep {
  .van-tabs__line {
    background-color: var(--a-main-color);
  }

  .van-tab--active {
    color: var(--a-main-color) !important;
    font-weight: bold;
  }

  .van-tab {
    font-size: 30rpx;
    color: var(--a-two-text-color);
  }

  .van-tabs__scroll {
    background-color: transparent;
  }
}

.home {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .container {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .banner {
      padding: 0 30rpx;
    }

    .tabs {
      margin-top: 10rpx;
    }

    .content_box {
      box-sizing: border-box;
      flex: 1;
      height: 1rpx;
      margin-top: 20rpx;
      padding: 0 30rpx;

      ::-webkit-scrollbar {
        display: none;
      }

      .content_list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 26rpx;

        .content_item {
          box-sizing: border-box;
          height: 192rpx;
          border-radius: 28rpx;
          background: var(--a-main-box-bg-color);

          padding: 32rpx;

          .top {
            display: flex;
            align-items: center;
            gap: 16rpx;

            .icon_box {
              flex-shrink: 0;
              width: 50rpx;
              height: 50rpx;
              border-radius: 12rpx;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 32rpx;

              .iconfont {
                color: var(--a-one-text-color);
              }
            }

            .top_title {
              flex: 1;
              text-align: left;
              font-size: 30rpx;
              font-weight: bold;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              color: var(--a-one-text-color)
            }
          }

          .content_text {
            margin-top: 19rpx;
            font-size: 22rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 2;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            color: var(--a-two-text-color);
          }
        }
      }
    }
  }

}
</style>